<template>
	<view class="bg-lottery pr" :style="'background-image: url(' + bg_image + ');'">
		<view class="d-b-s top-box ww100">
			<view class="d-s-c mt20">
				<image class="lottery-points" src="/static/icon/lottery-points.png" mode=""></image>
				<text class="yellow f28">{{ $t('plus.account_points') }}</text>
				<text class="white f36 ml10">{{ user_points }}</text>
			</view>
			<view class="points-rule" @click="isRule = true">{{ $t('plus.lottery_rules') }}</view>
		</view>
		<view class="rule-title">{{ $t('plus.lottery_cost') }} {{ points }} {{ $t('plus.points') }} ,
			{{ $t('plus.remaining_times', { place1: times }) }}</view>

		<view class="lottery-title">
			<!-- <almost-lottery
				:prizeList="prizeList"
				:prizeIndex="prizeIndex"
				:lotteryBg="'/uni_modules/almost-lottery/static/almost-lottery/almost-lottery__bg.png'"
				:actionBg="'/uni_modules/almost-lottery/static/almost-lottery/almost-lottery__action.png'"
				@reset-index="prizeIndex = -1"
				@draw-start="handleDrawStart"
				@draw-end="handleDrawEnd"
				@finish="handleDrawFinish"
				v-if="prizeList.length"
			/> -->
			<aylottery ref="aylottery" :availableSurplusNum="times" :list="prizeList" themeColor="#ffd372"
				bgColor="#feb360" bg_sd_Color="#ffffff00" @result="handleDrawEnd" @toDetailPage="toDetailPage"
				:stay_index="prizeIndex" @startFunc="handleDrawStart"></aylottery>
		</view>

		<view class="ww100 mb23 mt40">
			<button type="primary" class="record" @click="gotoPage('/pages/plus/lottery/WinningRecord')">
				{{ $t('plus.my_winning_records') }}
				<text class="icon iconfont icon-jiantou1"></text>
			</button>
		</view>
		<view class="content">
			<view class="d-b-c swiper-title">
				<view class="swiper-title-1">{{ $t('plus.nickname') }}</view>
				<view class="swiper-title-2">{{ $t('plus.prize_name') }}</view>
				<view class="swiper-title-3">{{ $t('plus.winning_time') }}</view>
			</view>
			<swiper class="swiper" vertical circular autoplay interval="2000" display-multiple-items="5">
				<swiper-item v-for="(item, index) in listData" :key="index">
					<view class="box">
						<view class="swiper-title-1 text-ellipsis">{{ maskUsername(item.nickName) }}</view>
						<view class="swiper-title-2 text-ellipsis">{{ item.recordName }}</view>
						<view class="swiper-title-3 text-ellipsis">{{ item.createTime }}</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<popup :show="isPopup" type="middle" backgroundColor="#fff" :padding="0" :width="576" :borderRadius="35"
			@hidePopup="hidePopup">
			<view class="pr ww100 tc mb38">
				<image src="/static/lottery.png" mode="aspectFill" class="pop-tit-img"></image>
				<view class="pop-tit-text"><text class="pop-text">{{ result.type ==
					0 ? $t('plus.sorry') : $t('plus.congratulations')}}</text></view>
			</view>
			<view class="d-c-c d-c ww100 product-box pr mt20">
				<image class="pop_img" :src="result.image" mode="aspectFill"></image>
				<view class="f26 text-ellipsis mb20">{{ result.prompt }}</view>
				<view class="pop-btn-sm " v-if="result.type == 3" @click="toRecord">
					{{ $t('plus.claim') }}</view>
				<view class="pop-btn-sm mt10" v-if="result.type != 3" @click="isPopup = false">
					{{ $t('plus.got_it') }}</view>
			</view>
		</popup>
		<popup :show="isRule" :width="575" :height="550" :padding="0" @hidePopup="isRule = false"
			backgroundColor="none">
			<view class="pop-center">
				<image class="bg-rule" src="/static/invite/lottery.png" mode=""></image>
				<view class="pop-title">{{ $t('plus.rules') }}</view>
				<scroll-view scroll-y="true" style="height: 473rpx;">
					<view class="pop-title-box" v-html="content"></view>

				</scroll-view>
			</view>
		</popup>
	</view>
</template>

<script>
import popup from '@/components/uni-popup.vue';
// import AlmostLottery from '@/uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue';
import uniLoadMore from '@/components/uni-load-more.vue';
import aylottery from '@/components/ay-lottery/marquee.vue';
export default {
	components: {
		// AlmostLottery,
		popup,
		uniLoadMore,
		aylottery
	},
	data() {
		return {
			loading: true,
			finish: false,
			times: 0,
			points: '',
			user_points: '',
			bg_image: '',
			content: '',
			// 以下是奖品配置数据
			// 奖品数据
			prizeList: [],
			// 奖品是否设有库存
			onStock: true,
			// 中奖下标
			prizeIndex: -1,
			result: {},
			listData: [],
			/*样式*/
			styleValue: '',
			/*当前角标*/
			index_num: 0,
			/*高度*/
			lineHeight: 0,
			/*最大数*/
			maxSize: 0,
			/*时间*/
			timer: null,
			isPopup: false,
			isRecord: false,
			recordList: [],
			list_rows: 10,
			last_page: 0,
			/*当前页面*/
			page: 1,
			/*没有更多*/
			no_more: false,
			isRule: false
		};
	},
	computed: {
		/*加载中状态*/
		loadingType() {
			if (this.loading) {
				return 1;
			} else {
				if (this.recordList.length != 0 && this.no_more) {
					return 2;
				} else {
					return 0;
				}
			}
		}
	},
	onShow() {
		this.isRecord = false;
		this.restoreData();
		this.handleInitCanvas();
		uni.setNavigationBarTitle({
			title: this.$t('user.lucky_turntable')
		})
	},
	methods: {
		toRecord() {
			this.isPopup = false;
			this.gotoPage('/pages/plus/lottery/WinningRecord');
		},
		maskUsername(username) {
			if (username.length < 2) {
				// 如果用户名长度小于2，直接返回原字符串
				return username;
			}

			// 获取首位字符
			const firstChar = username.charAt(0);
			const lastChar = username.charAt(username.length - 1);

			// 生成中间的 '*'
			const middleStars = '*'.repeat(username.length - 2);

			// 拼接首位字符和中间的 '*'
			return firstChar + middleStars + lastChar;
		},
		toDetailPage(e) {
			console.log('toDetailPage')
			let list = e.list;
			let idx = e.curIndex;
			let list_img = [];
			let item = e.item;

			list.forEach(item => {
				list_img.push(item.img);
			});
			if (list_img && list_img.length > 0) {
				uni.previewImage({
					current: list_img[idx], //  传 Number H5端出现不兼容
					urls: list_img,
					indicator: 'number',
					loop: true
				});
			}
		},


		/*初始化*/
		init() {
			let self = this;
			if (this.listData.length > 1) {
				uni.getSystemInfo({
					success(res) {
						self.lineHeight = (res.windowWidth / 750) * 60;
						self.maxSize = self.listData.length;
						self.timer = setInterval(function () {
							self.animation();
						}, 3000);
					}
				});
			}
		},
		/*动画*/
		animation() {
			let self = this;
			self.index_num++;
			if (self.index_num >= self.maxSize) {
				self.index_num = 0;
			}
			this.styleValue = -self.lineHeight * self.index_num;
		},
		async getPrizeList() {
			this.loading = true;
			// 等待接口返回的数据进一步处理
			let res = await this.requestApiGetPrizeList();
			if (res.ok) {
				let data = res.data;
				if (data.length) {
					data.forEach(item => {
						item.img = item.image;
						item.img_bg = '';
					})
					this.prizeList = data;
					this.finish = true;
				}
				console.log(this.prizeList)
				console.log(this.$refs.aylottery)
			} else {
				uni.hideLoading();
				uni.showToast({
					title: this.$t('plus.prize_retrieval_failed')
				});
			}
		},
		requestApiGetPrizeList() {
			let self = this;
			return new Promise((resolve, reject) => {
				self._post('plus/lottery/lottery/getLottery', {}, function (res) {
					self.loading = false;
					self.bg_image = res.data.detail.filePath;
					self.content = res.data.detail.content;
					self.prizeList = res.data.detail.prize;
					self.listData = res.data.recordList;
					self.times = res.data.nums;
					self.points = res.data.detail.points;
					self.user_points = res.data.userPoints;
					self.init();
					resolve({
						ok: true,
						data: self.prizeList
					});
				});
			});
		},
		GetDateDiff(startTime) {
			var t2 = startTime; //格式不正确需要转换
			var aftert2 = new Date(t2.replace(/-/g, '/'));
			var data = new Date();
			let times = data.getTime() - aftert2.getTime();
			var days = parseInt(times / (24 * 1000 * 3600)); //计算相差的天数
			var leave = times % (24 * 3600 * 1000); //计算天数后剩余的毫秒数

			var h = parseInt(leave / (3600 * 1000)); //计算小时数

			//计算分钟数
			var h_leave = leave % (3600 * 1000);
			var min = parseInt(h_leave / (60 * 1000));

			//计算秒数
			var min_leave = h_leave % (60 * 1000);
			var sec = parseInt(min_leave / 1000);
			let text = '';
			if (days > 0) {
				text = `${days}天前`;
			} else if (h > 0) {
				text = `${h}小时前`;
			} else if (min > 0) {
				text = `${min}分钟前`;
			} else {
				text = `${sec}秒前`;
			}
			console.log(days);
			return text;
		},
		// 重新生成
		handleInitCanvas() {
			this.prizeList = [];
			this.getPrizeList();
		},
		// 本次抽奖开始
		handleDrawStart() {
			let self = this;

			self.prizeIndex = -1;
			if (self.loading || !self.finish) {
				return;
			}
			if (self.times <= 0) {
				self.showError(this.$t('plus.insufficient_attempts'));
				return;
			}
			self.loading = true;
			self.finish = false;
			self._post(
				'plus/lottery/lottery/draw', {},
				function (res) {
					self.times--;
					self.loading = false;
					self.result = res.data;
					let list = [...self.prizeList];
					let prizeId = res.data.prizeId;
					for (let i = 0; i < list.length; i++) {
						let item = list[i];
						if (item.prizeId === prizeId) {
							// 中奖下标
							self.prizeIndex = i;
							break;
						}
					}
					self.$refs.aylottery.start();
					console.log('本次抽中奖品 =>', self.prizeList[self.prizeIndex].name);
				},
				function (err) {
					self.loading = false;
				}
			);
		},
		hidePopup() {
			this.isPopup = false;
		},
		hideRecordPopup() {
			this.isRecord = false;
		},

		// 本次抽奖结束
		handleDrawEnd() {
			console.log('@result')
			this.finish = true;
			this.isPopup = true;
			this.handleInitCanvas();
			// 完成抽奖后，这里处理你拿到结果后的逻辑
		},
		// 抽奖转盘绘制完成
		handleDrawFinish(res) {
			this.finish = true;
			// 抽奖转盘准备就绪后，这里处理你的逻辑
			// console.log('抽奖转盘绘制完成', res)
		},
		/*还原初始化*/
		restoreData() {
			this.recordList = [];
			this.page = 1;
			this.no_more = false;
			this.last_page = 1;
		},
		getList() {
			let self = this;
			self.loading = true;
			self._postBody(
				'plus/lottery/lottery/record', {
				pageSize: self.list_rows,
				pageIndex: self.page || 1
			},
				function (res) {
					self.loading = false;
					self.recordList = self.recordList.concat(res.data.records);
					self.lastPage = res.data.lastPage;
					if (res.data.lastPage <= 1) {
						self.no_more = true;
					}
				}
			);
		},
		getRecord() {
			this.restoreData();
			this.getList();
			this.isRecord = true;
		},
		/*可滚动视图区域到底触发*/
		scrolltolowerFunc() {
			let self = this;
			self.page++;
			self.loading = true;
			if (self.page > self.last_page) {
				self.loading = false;
				self.no_more = true;
				return;
			}
			self.getList();
		}
	}
};
</script>

<style lang="scss">
.bg-lottery {
	width: 750rpx;
	min-height: 1843rpx;
	background-size: 750rpx 1843rpx;
	background-position: 0 0;
	overflow: hidden;
}

.rule-title {
	font-size: 26rpx;
	margin: 0 auto;
	width: 498rpx;
	margin-top: 338rpx;
	color: #E25C12;
	box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(0, 0, 0, 0.15);
	background: #FACD89;
	border-radius: 200rpx;
	text-align: center;
	min-height: 56rpx;
	line-height: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10rpx 20rpx;
	box-sizing: border-box;
}

.lottery-title {
	padding-top: 120rpx;
	position: relative;
	z-index: 1;
}

button.record {
	width: 392rpx;
	height: 82rpx;
	border: none;
	background: linear-gradient(0deg, #FDF3BF 0%, #FAC233 49%, #FAC233 100%);
	box-shadow: 0rpx 1rpx 6rpx 0rpx rgba(228, 1, 28, 0);
	border-radius: 42rpx;
	padding: 0;
	color: #E37012;
	font-size: 32rpx;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.record .icon.icon-jiantou1 {
	font-size: 28rpx;
	font-weight: bold;
	color: #E37012;
	line-height: 1;
	margin-left: 10rpx;
}

.pop_img {
	width: 130rpx;
	height: 130rpx;
	border-radius: 35rpx;
	margin-bottom: 40rpx;
}

.pop-btn-sm {
	width: 212rpx;
	height: 64rpx;
	background: linear-gradient(0deg, #FDF3BF 0%, #FAC233 29%, #FAC233 100%);
	border-radius: 32rpx;
	color: #E37012;
	font-size: 28rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.pop-tit-img {
	width: 676rpx;
	height: 324rpx;
	position: absolute;
	z-index: 1;
	left: -50rpx;
	top: -244rpx;
}

.pop-tit-text {
	color: #fff;
	font-size: 32rpx;
	display: inline;
	padding: 0 16rpx;
	height: 80rpx;
	line-height: 80rpx;

	.pop-text {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		z-index: 2;
	}
}

.product-box {
	border-radius: 24rpx;
	background-color: #ffffff;
	padding: 47rpx 0 40rpx 0;
}

.top-box {
	position: absolute;
	top: 20rpx;
	z-index: 2;
}

.lottery-points {
	width: 56rpx;
	height: 56rpx;
	margin-right: 14rpx;
	flex-shrink: 0;
	margin-left: 20rpx;
}

.points-rule {
	width: 47rpx;
	writing-mode: vertical-rl;
	background: #FFD372;
	border-radius: 15rpx 0 0 15rpx;
	color: #E27012;
	font-size: 24rpx;
	padding: 10rpx 0 0;
	box-sizing: border-box;
	writing-mode: vertical-rl;
	display: flex;
	justify-content: center;
	align-items: center;
}

.yellow {
	color: #ffc519;
}

.pop-center {
	position: relative;
	width: 575rpx;
	height: 550rpx;
}

.pop-title {
	position: relative;
	height: 77rpx;
	line-height: 77rpx;
	color: #ffffff;
	font-size: 28rpx;
	text-align: center;
	z-index: 1;
}

.pop-title-box {
	padding: 78rpx 52rpx 20rpx 42rpx;
	white-space: pre-line;
	color: #7f685a;
	font-size: 26rpx;
	line-height: 46rpx;
}

.bg-rule {
	width: 575rpx;
	height: 550rpx;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
}

.swiper {
	width: 662rpx;
	/* 高度跟自己需要的子元素更改，我这里是显示3个，每个50rpx 所以是150rpx */
	height: 240rpx;
	margin: 0rpx auto;
}

.content {
	width: 710rpx;
	margin: 0 auto;
	padding: 37rpx 24rpx;
	box-sizing: border-box;
	background: #FFFFFF;
	border-radius: 25rpx;

	.swiper-title {
		height: 48rpx;
		line-height: 48rpx;
		color: #E27012;
	}

	.swiper-title-1 {
		width: 188rpx;
	}

	.swiper-title-2 {
		width: 178rpx;
	}

	.swiper-title-3 {
		width: 254rpx;
	}
}

.box {
	color: #333;
	font-size: 24rpx;
	line-height: 48rpx;
	height: 48rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	// padding: 0 10rpx;
}

::v-deep .uni-popup-middle {
	overflow: inherit;
}
</style>